<!DOCTYPE html>
<!-- saved from url=(0070)https://www.17sucai.com/preview/1339618/2019-08-23/login/register.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>注册</title>
    <link rel="stylesheet" href="./注册_files/index.css">
    <style type="text/css">
    #minbox{
    float:right;
    width:150px;
    color:red;
    text-align: center;
    margin-top:0px;
    }
    #checkphone{
    float:right;
    width:150px;
    color:red;
     text-align: center;
    margin-top:6px;
    }
    #checkwd{
    float:right;
    width:150px;
    color:red;
    text-align: center;
    margin-top:6px;
    font-size:14px;
    }
    #checkpwd2{
    float:right;
    width:150px;
    color:red;
     text-align: center;
    margin-top:6px;
    }
    #checkcode{
    float:right;
    color:red;
    text-align: center;
    }
    .img{
    width:30px;
    height:30px;
    float:right;
    margin-right:40px;
    margin-top: 0px;
    }
    </style>
</head>
<body class="bg-register">
    <div class="register-contain">
        <div class="register-header">
            <a href="/chat/start"> &lt; <span>登入</span> </a>
        </div>
        <div class="form-group">
            <div class="form-item">
                <label for="phone">
                    <img src="./注册_files/phone.png" alt="">
                </label>
                <input id="phone" type="text" name="phone" placeholder="请输入手机号">
                <div id="checkphone" th:fragment="checkphone" th:text="${alert}"></div>
            </div>
            <div class="form-item">
                <label for="code">
                    <img src="./注册_files/code.png" alt="">
                </label>
                <input id="code" type="text" placeholder="请输入验证码">
                <div id="checkcode"></div>
                <div id="minbox">
                <button type="button" id="sendcode">发送验证码</button>
                </div>
            </div>
            <div class="form-item">
                <label for="password">
                    <img src="./注册_files/key.png" alt="">
                </label>
                <input id="password" type="password" placeholder="请填写密码">
                <div id="checkwd"></div>
            </div>
            <div class="form-item">
                <label for="respassword">
                    <img src="./注册_files/key.png" alt="">
                </label>
                <input id="respassword" type="password" placeholder="请确认密码">
                <div id="checkpwd2"></div>
            </div>
        </div>
        <div class="button-group">
            <button id="submi" type="submit" class="login-btn" >注册</button>
        </div>
        <div class="authorization">
            <input type="checkbox" id="agree" name="test" value="1">
            <span class="ml-5">注册使用即表示同意</span>
            <a href="/chat/advice"><span class="protocol">用户协议及版权声明</span></a>
        </div>
        <div class="go-login">
            <a href="/chat/start">已经有账号？去登录</a>
        </div>
        <div class="tourism">
            <img src="./注册_files/tourism.png" alt="">
            <img src="./注册_files/tourism2.png" alt="">
            <img src="./注册_files/tourism3.png" alt="">
        </div>
    </div>
<script src="./注册_files/index.js.下载"></script>

</body>
<script src="/chat/js/jquery.min.js"></script>
<script type="text/javascript">
var isy=false;
var isok=false;
var iscode=false;
var issu=false;
$("#sendcode").click(function(){
		if(iscode){
			var phone=$("#phone").val();
			$('#checkcode').load("/chat/code",{phone:phone},function(data){
				if(data=="手机号已存在"){
					$("#checkphone").empty();
					$("#checkcode").empty();
					$("#checkphone").append(data);
					isy=false;
				}else{
					$("#checkphone").empty();
					$("#checkphone").append("<img src='./注册_files/yes.png' class='img'>");
					$("#sendcode").remove();
				        isy=true;
					hello();	
				}	 
			})	
		}else{
			alert("请输入正确的手机号！");
		}
	})	
function hello(){
   var maxtime = 100; //按秒计算，自己调整!
   var timer=document.getElementById("minbox");
   (function CountDown(){
      var seconds=maxtime;
      timer.innerHTML=seconds+"秒后可重新发送";
      if(--maxtime>=0){
         setTimeout(CountDown,1000);
      }else{
    	  location.reload()
      }
   })();
}
$("#phone").blur(function(){
	var number = $("#phone").val();
	if(number == ""){
		$("#checkphone").empty();
		$("#checkphone").append("手机号不能为空");
		iscode=false;
		}else{
		$("#checkphone").empty();
		$("#checkphone").append("<img src='./注册_files/yes.png' class='img'>");
		iscode=true;
	}
	if(/^[0-9][1-9]{10}$/.test(number) == false){	//使用正则表达式
		$("#checkphone").empty();
		$("#checkphone").append("手机号的格式不对");
		iscode=false;
		}else{
			$("#checkphone").empty();
			$("#checkphone").append("<img src='./注册_files/yes.png' class='img'>");
			iscode=true;
		} 
	});
var str="";//存储表单真实密码
var stp="";//存储第二次支付的密码 
/* $("#password").keyup(function(){
       value=$(this).val()//获取表单密码
       if(value.length>=str.length){//当密码长度增加时由于前面的已经变成星号，所以截取后面输入的字符追加到str中
          str+=value.substr(str.length,value.length-str.length)    
       }
       else{//当密码长度减小时，判断减小后的长度，然后从真实密码中截取
         str=str.substr(0,value.length)
       }           
        $(this).val(value.replace(/./g,"*"))//变星星喽
    });
$("#respassword").keyup(function(){
       value=$(this).val()//获取表单密码
       if(value.length>=stp.length){//当密码长度增加时由于前面的已经变成星号，所以截取后面输入的字符追加到str中
          stp+=value.substr(stp.length,value.length-stp.length)    
       }
       else{//当密码长度减小时，判断减小后的长度，然后从真实密码中截取
         stp=stp.substr(0,value.length)
       }           
        $(this).val(value.replace(/./g,"*"))//变星星喽
    }); */
var isone=false;
var istwo=false;
var isthree=false;
$("#password").blur(function(){
	 str=$("#password").val();
	if(/^[a-zA-Z0-9_-]{6,16}$/.test(str)==false){
		$("#checkwd").empty();
		$("#checkwd").append("6到16位（字母，数字，下划线，减号）");
		isok=false;
	}else{
		$("#checkwd").empty();
		$("#checkwd").append("<img src='./注册_files/yes.png' class='img'>");
		isok=true;
	}
});
$("#respassword").blur(function(){
	 stp=$("#respassword").val();
	if(stp != str){
		$("#checkpwd2").empty();
		$("#checkpwd2").append("两次密码不一致");
		issu=false;
		}else{
			$("#checkpwd2").empty();
			$("#checkpwd2").append("<img src='./注册_files/yes.png' class='img'>");
			issu=true;
		} 	
});
$("#submi").click(function(){
	var x=document.getElementsByName("test");
	if(x[0].checked==true){
		if(iscode==true&&isok==true&&issu==true&&isy==true){
			var phone=$("#phone").val();
			   var code=$("#code").val();
			   $('#minbox').load("/chat/register",{phone:phone,code:code,pwd:stp},function(data){
				   if(data=="hello"){
					   alert("注册成功！感谢您的加入！");
					   location.href="/chat/start";
				   }else{
					   $('#minbox').empty();
					   $('#agree').empty();
					   alert("验证码有误！")
			           location.reload();     
					   $("#phone").val("");
					   $("#password").val("");
					   $("#respassword").val("");
					   alert($('#agree').val());					   
				   }
					  /*  alert("验证码有误！");
					   location.reload(); */
			   });	
		}else{
			alert("请根据页面提示完成操作");
		}
	}else{
		alert("勾选下方用户协议即可完成注册！");
	}
});	
</script>
</html>